<template>
    <div class="profile-wrapper">
        <el-dropdown class="dropdown-skin-box">
            <span class="dropdown-skin-icon">
                <svg
                    id="skinSvgId"
                    t="1718243012863"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="4353"
                    width="200"
                    height="200"
                >
                    <path
                        d="M772.8 96v64l163.2 161.6-91.2 91.2c-12.8-11.2-27.2-16-43.2-16-36.8 0-65.6 28.8-65.6 65.6V800c0 35.2-28.8 64-64 64H352c-35.2 0-64-28.8-64-64V462.4c0-36.8-28.8-65.6-65.6-65.6-16 0-32 6.4-43.2 16l-91.2-91.2L249.6 160h40l1.6 1.6C336 228.8 420.8 272 512 272c91.2 0 176-41.6 220.8-110.4 0-1.6 1.6-1.6 1.6-1.6h38.4V96M291.2 96H256c-22.4 0-38.4 6.4-49.6 19.2L43.2 276.8c-25.6 25.6-25.6 65.6 0 89.6l94.4 94.4c11.2 11.2 27.2 17.6 41.6 17.6s30.4-6.4 41.6-17.6h1.6c1.6 0 1.6 0 1.6 1.6V800c0 70.4 57.6 128 128 128h320c70.4 0 128-57.6 128-128V462.4c0-1.6 0-1.6 1.6-1.6h1.6c11.2 11.2 27.2 17.6 41.6 17.6 16 0 30.4-6.4 41.6-17.6l94.4-94.4c25.6-25.6 25.6-65.6 0-89.6L819.2 115.2c-12.8-12.8-28.8-19.2-46.4-19.2h-40c-22.4 0-41.6 11.2-54.4 30.4-33.6 49.6-96 81.6-168 81.6s-134.4-33.6-168-81.6C332.8 107.2 312 96 291.2 96z"
                        fill="#49576A"
                        p-id="4354"
                    ></path>
                </svg>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item
                        v-for="item in themeList"
                        :key="item.value"
                        class="drop-theme-item"
                        :class="{
                            'active-drop-theme-item': item.value === theme,
                        }"
                        @click="clickToggleTheme(item.value)"
                        >{{ item.title }}</el-dropdown-item
                    >
                    <div class="drop-item-divider"></div>
                    <el-dropdown-item
                        v-for="item in layoutList"
                        :key="item.value"
                        class="drop-layout-item"
                        :class="{
                            'active-drop-layout-item': item.value === menuMode,
                        }"
                        @click="clickToggleLayout(item.value)"
                        >{{ item.title }}</el-dropdown-item
                    >
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <div class="svg-box"></div>
        <el-dropdown class="dropdown-role-box">
            <span class="dropdown-current-role">
                {{ currentRole }}
                <el-icon><arrow-down /></el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item
                        v-for="item in roles"
                        :key="item"
                        class="drop-role-item"
                        :class="{
                            'active-drop-role-item': item === currentRole,
                        }"
                        @click="clickToggleRole(item)"
                        >{{ item }}</el-dropdown-item
                    >
                    <div class="drop-item-divider"></div>
                    <div class="drop-role-logout-btn" @click="clickLogout">
                        退出
                    </div>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { ElMessageBox } from "element-plus";
import { ArrowDown } from "@element-plus/icons-vue";
import {
    useLayoutStore,
    usePermissionStore,
    useUserStore,
} from "@/stores/index.ts";
import { useRouter } from "vue-router";
const router = useRouter();
const layoutStoreData = useLayoutStore();
const permissionStoreData = usePermissionStore();
const userStoreData = useUserStore();
const { menuMode, theme } = storeToRefs(layoutStoreData);
const { roles, currentRole } = storeToRefs(userStoreData);
const themeList = [
    {
        title: "主题1",
        value: "light",
    },
    {
        title: "主题2",
        value: "dark",
    },
];
const layoutList = [
    {
        title: "布局1",
        value: "horizontal",
    },
    {
        title: "布局2",
        value: "vertical",
    },
];
const clickToggleLayout = (modeValue: string) => {
    if (menuMode.value === modeValue) {
        return;
    }
    layoutStoreData.setMenuMode(modeValue);
};
const clickToggleTheme = (themeValue: string) => {
    if (theme.value === themeValue) {
        return;
    }
    layoutStoreData.setTheme(themeValue);
    document.documentElement.setAttribute("data-theme", themeValue);
};
const clickToggleRole = (role: string) => {
    if (currentRole.value == role) {
        return;
    }
    localStorage.setItem("CURRENT_ROLE", role);
    permissionStoreData.getMenus(role).then(() => {
        userStoreData.setCurrentRole(role);
        setTimeout(() => {
            router.push({ path: "/" });
            console.log(123);
        }, 500);
    });
};

const resetStore = () => {
    const storeList = [layoutStoreData, permissionStoreData, userStoreData];
    storeList.forEach((store) => store.$reset());
};
const clickLogout = () => {
    ElMessageBox.confirm("确认退出系统?", "Warning", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
    })
        .then(() => {
            localStorage.removeItem("ACCESS_TOKEN");
            document.documentElement.setAttribute("data-theme", "dark");
            router.push({ path: "/login" });
            resetStore();
        })
        .catch(() => {});
};
</script>

<style lang="scss" scoped>
.profile-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: auto;
    #skinSvgId {
        width: 22px;
        height: 22px;
        transform: translateY(3px);
        &:hover {
            cursor: pointer;
        }
        path {
            fill: var(--side-menu-bg-color);
        }
    }
    .dropdown-current-role {
        display: inline-block;
        width: 80px;
        font-size: 16px;
        font-weight: 500;
        color: var(--side-menu-bg-color);
        &:focus-visible {
            outline: none;
        }
    }
    .dropdown-skin-icon {
        &:focus-visible {
            outline: none;
        }
    }
}
</style>
<style lang="scss">
.dropdown-role-box {
    margin-left: 20px;
}
.drop-theme-item,
.drop-layout-item,
.drop-role-item {
    justify-content: center;
    &:hover {
        color: #fff;
        background-color: var(--side-menu-bg-color);
    }
}
.active-drop-theme-item,
.active-drop-layout-item,
.active-drop-role-item {
    color: var(--side-menu-bg-color);
}
.drop-item-divider {
    width: 100%;
    border-top: 1px solid #eee;
    margin: 5px 0;
}
.drop-role-logout-btn {
    width: 100%;
    text-align: center;
    color: red;
    font-size: 14px;
    &:hover {
        cursor: pointer;
    }
}
</style>
